package com.znh.kuiklyuniversity.compose.mainPage

import androidx.compose.runtime.Composable
import com.tencent.kuikly.compose.coil3.rememberAsyncImagePainter
import com.tencent.kuikly.compose.foundation.Image
import com.tencent.kuikly.compose.foundation.layout.Arrangement
import com.tencent.kuikly.compose.foundation.layout.Box
import com.tencent.kuikly.compose.foundation.layout.Column
import com.tencent.kuikly.compose.foundation.layout.PaddingValues
import com.tencent.kuikly.compose.foundation.layout.Row
import com.tencent.kuikly.compose.foundation.layout.aspectRatio
import com.tencent.kuikly.compose.foundation.layout.fillMaxSize
import com.tencent.kuikly.compose.foundation.layout.fillMaxWidth
import com.tencent.kuikly.compose.foundation.layout.height
import com.tencent.kuikly.compose.foundation.layout.padding
import com.tencent.kuikly.compose.foundation.layout.width
import com.tencent.kuikly.compose.foundation.lazy.LazyColumn
import com.tencent.kuikly.compose.foundation.lazy.grid.GridCells
import com.tencent.kuikly.compose.foundation.lazy.grid.LazyVerticalGrid
import com.tencent.kuikly.compose.foundation.pager.HorizontalPager
import com.tencent.kuikly.compose.foundation.pager.PageSize
import com.tencent.kuikly.compose.foundation.pager.rememberPagerState
import com.tencent.kuikly.compose.foundation.shape.RoundedCornerShape
import com.tencent.kuikly.compose.material3.Text
import com.tencent.kuikly.compose.ui.Alignment
import com.tencent.kuikly.compose.ui.Modifier
import com.tencent.kuikly.compose.ui.draw.clip
import com.tencent.kuikly.compose.ui.graphics.Color
import com.tencent.kuikly.compose.ui.layout.ContentScale
import com.tencent.kuikly.compose.ui.text.style.TextAlign
import com.tencent.kuikly.compose.ui.unit.dp
import com.tencent.kuikly.compose.ui.unit.sp
import com.tencent.kuikly.core.base.BorderStyle
import com.tencent.kuikly.core.base.attr.ImageUri
import com.znh.kuiklyuniversity.Border
import com.znh.kuiklyuniversity.backgroundColor
import com.znh.kuiklyuniversity.border
import com.znh.kuiklyuniversity.compose.selfenum.AppColor
import com.znh.kuiklyuniversity.compose.widgets.SelectList
import com.znh.kuiklyuniversity.compose.widgets.TitleLayout
import com.znh.kuiklyuniversity.height
import com.znh.kuiklyuniversity.margin
import com.znh.kuiklyuniversity.padding
import com.znh.kuiklyuniversity.width

@Composable
fun StorePage() {
    Column(modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.CenterEnd
        ) {
            storePage()
            SelectList()
        }
    }
}

@Composable
fun storePage() {
    val imgList: List<String> = listOf(
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/info_banner.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/image_banner_user.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/banner_no1.jpg",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/banner_no2.png"
    )
    val pagerState = rememberPagerState(
        initialPage = 0,
        pageCount = { imgList.size }
    )

    var storeItem: List<String> = listOf(
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/icon_mini_plathform_02.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/icon_mini_plathform_04.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/icon_logo.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/icon_mini_plathform_05.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/icon_mini_plathform_06.png"
    )

    var productList: List<String> = listOf(
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/ping_tu1.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/ping_tu2.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/image_icon_all.jpeg",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/icon_top_bg_image.9.png",
        ImageUri.SCHEME_COMMON_ASSETS + "commonimage/icon_shuerte.png"
    )

    LazyColumn(modifier = Modifier.fillMaxSize().padding(start = 16.dp, end = 16.dp, top = 24.dp)) {
        item {
            HorizontalPager(
                pageSize = PageSize.Fill,
                state = pagerState,
                modifier = Modifier
                    .fillMaxWidth(),
                pageContent = { index ->
                    Image(
                        painter = rememberAsyncImagePainter(imgList.get(index)),
                        contentDescription = "banner",
                        contentScale = ContentScale.FillWidth,
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(150.dp)
                            .clip(RoundedCornerShape(10.dp))
                    )
                }
            )
        }

        item {
            Box(modifier = Modifier.height(10.dp))
        }
        item {
            Box(
                modifier = Modifier.height(100.dp)
                    .fillParentMaxWidth()
                    .backgroundColor(Color.White)

                    .clip(RoundedCornerShape(10.dp)),
                contentAlignment = Alignment.Center
            ) {
                LazyVerticalGrid(
                    columns = GridCells.Fixed(5),
                    contentPadding = PaddingValues(10.dp),
                    horizontalArrangement = Arrangement.spacedBy(10.dp),
                    verticalArrangement = Arrangement.spacedBy(10.dp),
                    content = {
                        items(storeItem.size) {
                            Column(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .aspectRatio(ratio = 1f),
                                horizontalAlignment = Alignment.CenterHorizontally
                            ) {
                                Image(
                                    painter = rememberAsyncImagePainter(
                                        storeItem.get(
                                            it
                                        )
                                    ),
                                    contentDescription = "编辑栏目",
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .aspectRatio(ratio = 1f)
                                        .padding(5.dp)

                                )
                            }

                        }
                    }
                )
            }
        }

        item {
            Box(modifier = Modifier.height(10.dp))
        }

        items(productList.size) {
            Column {


                Row(
                    modifier = Modifier.backgroundColor(Color.White)
                        .fillParentMaxWidth().clip(
                            RoundedCornerShape(5.dp)
                        ).padding(10.dp)
                        .border(
                            Border(
                                lineWidth = 1.dp,
                                lineStyle = BorderStyle.SOLID,
                                color = Color.Gray
                            )
                        )
                ) {
                    Image(
                        painter = rememberAsyncImagePainter(
                            productList.get(it)
                        ),
                        contentDescription = "商品",
                        modifier = Modifier
                            .width(100.dp)
                            .clip(RoundedCornerShape(10.dp))
                            .aspectRatio(ratio = 1f)
                            .padding(end = 10.dp)

                    )
                    Column {
                        Text("商品名称", fontSize = 16.sp, color = AppColor.TxtCom.color)
                        Text(
                            "商品结束",
                            fontSize = 14.sp,
                            color = AppColor.TxtCom.color,
                            modifier = Modifier.padding(top = 10.dp, bottom = 10.dp)
                        )
                        Text("商品价格", fontSize = 14.sp, color = Color.Red)
                    }

                }
                Box(modifier = Modifier.height(3.dp))
            }
        }
    }
}

